<template>
    <div>
        <el-divider content-position="left">新建付款单</el-divider>
        <div class="bor">
            <el-form ref="formPayRef" :model="formData" label-width="105px" label-position="right">
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="应实付款金额">
                            {{ orderData.payment_amount_true }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="累计付款金额">
                            {{ orderData.order_payment_amount }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="未付款金额">
                            {{ orderData.payment_amount_true - orderData.order_payment_amount }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="创单时间">
                            <!-- {{ orderData.create_time }} -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="抵扣款类型">
                            <el-select v-model="currentDeduction" size="small" multiple style="width: 260px">
                                <el-option v-for="item in deduction" :key="item.id" :label="item.name" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <template v-for="(item, index) in formData.attr">
                    <el-row v-if="item.type == 1 && currentDeduction.includes('1')">
                        <el-col :span="span">
                            <el-form-item label="预支款"></el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="预支款类型">
                                <el-select v-model="item.field1" size="small">
                                    <el-option v-for="item in advanceOpt" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="预支金额">
                                <el-input-number v-model="item.field2" :precision="2" :min="0" size="small" />
                                <span style="margin-left: 5px">元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="备注">
                                <el-input v-model="item.field3" size="small" style="flex: 1" />
                                <el-button style="margin-left: 5px" type="warning" :icon="Minus" circle size="small" @click="handleMinus(1, index)" />
                                <el-button type="primary" :icon="Plus" circle size="small" @click="handlePlus(1)" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="item.type == 2 && currentDeduction.includes('2')">
                        <el-col :span="span">
                            <el-form-item label="抵押款"></el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="抵押物类型">
                                <el-select v-model="item.field1" size="small">
                                    <el-option v-for="item in collateralOpt" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="抵押金额">
                                <el-input-number v-model="item.field2" :precision="2" :min="0" size="small" />
                                <span style="margin-left: 5px">元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="备注">
                                <el-input v-model="item.field3" size="small" style="flex: 1" />
                                <el-button style="margin-left: 5px" type="warning" :icon="Minus" circle size="small" @click="handleMinus(2, index)" />
                                <el-button type="primary" :icon="Plus" circle size="small" @click="handlePlus(2)" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="item.type == 3 && currentDeduction.includes('3')">
                        <el-col :span="span">
                            <el-form-item label="其他扣款"></el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="事由">
                                <el-input v-model="item.field1" size="small" style="flex: 1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="金额">
                                <el-input-number v-model="item.field2" :precision="2" :min="0" size="small" />
                                <span style="margin-left: 5px">元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="span">
                            <el-form-item label="备注">
                                <el-input v-model="item.field3" size="small" style="flex: 1" />
                                <el-button style="margin-left: 5px" type="warning" :icon="Minus" circle size="small" @click="handleMinus(3, index)" />
                                <el-button type="primary" :icon="Plus" circle size="small" @click="handlePlus(3)" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="付款节点">
                            <el-date-picker v-model="formData.payment_node" type="date" size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="实付款方式">
                            <el-select v-model="formData.payment_type" size="small">
                                <el-option v-for="item in paymentOpt" :key="item.id" :label="item.name" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="实付款金额">
                            <el-input-number v-model="formData.payment_amount" :precision="2" :min="0" size="small" />
                            <span style="margin-left: 5px">元</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="备注">
                            <el-input v-model="formData.payment_remark" size="small" style="flex: 1" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="span">
                        <el-form-item label="付款合计金额">
                            {{ totalPayment }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="剩余未付金额">
                            {{ orderData.payment_amount_true - totalPayment }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="span"> </el-col>
                    <el-col :span="span"> </el-col>
                </el-row>
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="附件">
                            <el-button type="primary" link> 查看 </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span"> </el-col>
                    <el-col :span="span"> </el-col>
                    <el-col :span="span"> </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="付款说明">
                            <el-input v-model="formData.payment_memo" type="textarea" placeholder="请输入付款说明" :autosize="{ minRows: 4 }" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus, Minus } from '@element-plus/icons-vue'
import { listAll } from '@/api/financial/lists'
const props = defineProps({
    orderData: { type: Object, required: true }
})
onMounted(() => {
    fetchListAll()
})
const formData = ref({
    order_id: '',
    payment_node: '', // 付款节点
    payment_type: '', // 付款方式
    payment_amount: 0, // 付款金额
    payment_remark: '', // 备注
    payment_memo: '', // 付款说明
    attachment: '', // 附件
    attr: [
        { type: 1, field1: '', field2: 0, field3: '' },
        { type: 2, field1: '', field2: 0, field3: '' },
        { type: 3, field1: '', field2: 0, field3: '' }
    ]
})
// 计算应实付款金额
const total = computed(() => {
    const { order_payment_amount, labor_cost_deduction_amount, award } = props.orderData
    // 付款金额 - 人工扣税
    const res = order_payment_amount - labor_cost_deduction_amount
    // 有奖罚 处理奖罚
    if (award.length > 0) {
        const type = award[0].award_id // 1 奖励|2 罚款
        const awardAmount = Number(award[0].amount)
        return type == '1' ? res + awardAmount : res - awardAmount
    }
    return res
})
// 计算付款合计金额
const totalPayment = computed(() => {
    return formData.value.attr.reduce((pre, item) => pre + Number(item.field2), 0) + Number(formData.value.payment_amount || 0)
})
// 加减
const handlePlus = (type: number) => {
    const i = formData.value.attr.findLastIndex(item => item.type == type)
    const res = {
        type: formData.value.attr[i].type,
        field1: '',
        field2: 0,
        field3: ''
    }
    formData.value.attr.splice(i + 1, 0, res)
}
const handleMinus = (type: number, index: number) => {
    const len = formData.value.attr.filter(item => item.type == type).length
    if (len > 1) {
        formData.value.attr.splice(index, 1)
    }
}
const span = ref(6)
// 列表
interface List {
    id: string
    value: string
    name: string
}
const advanceOpt = ref<List[]>([]) // 预支款
const collateralOpt = ref<List[]>([]) // 抵押物
const paymentOpt = ref<List[]>([]) // 实付款
const deduction = ref<List[]>([]) // 抵扣款类型
const currentDeduction = ref<string[]>([])
const fetchListAll = async () => {
    const res = await listAll()
    advanceOpt.value = res.type_of_advance
    collateralOpt.value = res.type_of_collateral
    paymentOpt.value = res.terms_of_payment
    deduction.value = res.type_of_deduction
}
const getFormData = () => {
    formData.value.order_id = props.orderData.id
    const params = { ...formData.value, attr: '' }
    params.attr = JSON.stringify(formData.value.attr)
    return params
}
defineExpose({ getFormData })
</script>

<style scoped lang="scss">
$bor-color: #eeeff0;

::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    border: 0 !important;
    color: #666666;
    cursor: not-allowed;
}

::v-deep .el-input.is-disabled .el-input__wrapper {
    background-color: #fff !important;
}

::v-deep .el-image__error {
    background-color: #fff !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #666666;
    cursor: not-allowed;
}

.fontcolor {
    color: #666666;
}

.el-col {
    border-right: 1px solid $bor-color;
    border-top: 1px solid $bor-color;
    align-items: center;
    padding: 2px;

    &:nth-child(4n) {
        border-right: 0;
    }
}

.el-form-item {
    margin-bottom: 0;
}

::v-deep .el-form-item__label {
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}

.bor {
    border-bottom: 1px solid $bor-color;
    border-left: 1px solid $bor-color;
    border-right: 1px solid $bor-color;

    .bor-title {
        width: 100%;
        height: 40px;
        padding: 10px;
        background-color: #f8f8f8;
    }

    .zhangMain {
        position: absolute;
        right: 30px;
        top: 20px;
        z-index: 0;
        width: 120px;
        height: 120px;
        transform: rotate(20deg);

        .zhang {
            width: 100%;
            height: 100%;
            opacity: 0.6;
        }
    }
}

::v-deep .el-form-item__error {
    z-index: 10;
}

.buts {
    width: 100%;
    height: 50px;
    padding-top: 20px;

    .el-button {
        float: right;
    }
}

.f-left {
    margin-left: 10px;
}

::v-deep .span {
    .el-input__inner {
        width: 133px;
    }

    .el-input__suffix-inner {
        display: none;
    }
}

::v-deep .el-form-item__error {
    top: 80%;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}
</style>
